
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">边框</span>
</h1>
<hr/>
<h2>CSS 边框属性</h2>
<p>CSS边框属性允许你指定一个元素边框的样式和颜色。</p>
<div style="border: 1px solid #ccc!important;border-color: #000!important;padding: 14px;">
<p>
在四边都有边框
</p>
</div><br/>
<div style="border-bottom: 1px solid #ccc!important;padding:14px;border-color: #f44336!important;">
<p>
红色底部边框
</p>
</div><br/>
<div style="border: 1px solid #ccc!important;padding:14px;border-radius: 16px!important;">
<p>
圆角边框
</p>
</div>
<br/>
<div style="background-color: #ddffff!important;padding: 14px;border-left: 6px solid #ccc!important;border-color: #2196F3!important;">
<p>
左侧边框带宽度，颜色为蓝色
</p>
</div>
<hr/>
<h2>边框样式</h2>
<p>边框样式属性指定要显示什么样的边界。</p>
<p><img alt="Remark" decoding="async" src="/images/lamp.gif"/> <b>border-style</b>属性用来定义边框的样式</p>
<h2>border-style 值:</h2>
<p style="border: 1px none #000000;padding:3px">none: 默认无边框</p><br/>
<p style="border: 1px dotted #000000;padding:3px">dotted: 定义一个点线边框</p><br/>
<p style="border: 1px dashed #000000;padding:3px">dashed: 定义一个虚线边框</p><br/>
<p style="border: 1px solid #000000;padding:3px">solid: 定义实线边框</p><br/>
<p style="border: 3px double #000000;padding:3px">double: 定义两个边框。 两个边框的宽度和 border-width 的值相同</p><br/>
<p style="border: 5px groove #98bf21;padding:3px">groove: 定义3D沟槽边框。效果取决于边框的颜色值</p><br/>
<p style="border: 5px ridge #98bf21;padding:3px">ridge: 定义3D脊边框。效果取决于边框的颜色值</p><br/>
<p style="border: 5px inset #98bf21;padding:3px">inset:定义一个3D的嵌入边框。效果取决于边框的颜色值</p><br/>
<p style="border: 5px outset #98bf21;padding:3px">outset: 定义一个3D突出边框。 效果取决于边框的颜色值</p><br/>
<p><a class="tryitbtn"  rel="noopener" target="_blank"> 尝试一下 »</a></p>
<hr/>
<h2>边框宽度</h2>
<p>您可以通过 border-width 属性为边框指定宽度。</p>
<p>为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)，或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值） 和 thin。</p>
<p><b>注意：</b>CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">p</span><span class="hl-identifier">.one</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">border-style:</span><span class="hl-string">solid</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border-width:</span><span class="hl-number">5</span><span class="hl-string">px</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-identifier">.two</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">border-style:</span><span class="hl-string">solid</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border-width:</span><span class="hl-string">medium</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>边框颜色</h2>
<p>border-color属性用于设置边框的颜色。可以设置的颜色：</p>
<ul>
<li>name - 指定颜色的名称，如 "red"</li>
<li>RGB - 指定 RGB 值, 如 "rgb(255,0,0)"</li>
<li>Hex - 指定16进制值, 如 "#ff0000"</li>
</ul>
<p>您还可以设置边框的颜色为"transparent"。</p>
<p><b>注意：</b> border-color单独使用是不起作用的，必须得先使用border-style来设置边框样式。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">p</span><span class="hl-identifier">.one</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">border-style:</span><span class="hl-string">solid</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border-color:</span><span class="hl-var">red</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-identifier">.two</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">border-style:</span><span class="hl-string">solid</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border-color:</span><span class="hl-var">#98bf21</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>边框-单独设置各边</h2>
<p>在CSS中，可以指定不同的侧面不同的边框：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code"><div class="hl-main"><span class="hl-identifier">p</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">border-top-style:</span><span class="hl-string">dotted</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border-right-style:</span><span class="hl-string">solid</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border-bottom-style:</span><span class="hl-string">dotted</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">border-left-style:</span><span class="hl-string">solid</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<p>上面的例子也可以设置一个单一属性：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">border-style</span><span class="hl-special">:dotted</span><span class="hl-code"> </span><span class="hl-identifier">solid</span><span class="hl-code">;</span></div></div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<p>border-style属性可以有1-4个值：</p>
<ul>
<li>
<b>border-style:dotted solid double dashed; </b>
<ul>
<li>上边框是 dotted</li>
<li>右边框是 solid</li>
<li>底边框是 double</li>
<li>左边框是 dashed</li>
</ul>
<br/>
</li>
<li>
<b>border-style:dotted solid double;</b>
<ul>
<li>上边框是 dotted</li>
<li>左、右边框是 solid</li>
<li>底边框是 double</li>
</ul>
<br/>
</li>
<li>
<b>border-style:dotted solid;</b>
<ul>
<li>上、底边框是 dotted</li>
<li>右、左边框是 solid</li>
</ul>
<br/>
</li>
<li>
<b>border-style:dotted;</b><ul><li>四面边框是 dotted</li></ul>
</li>
</ul>
<p>上面的例子用了border-style。然而，它也可以和border-width 、 border-color一起使用。</p>
<hr/>
<h2>边框-简写属性</h2>
<p>上面的例子用了很多属性来设置边框。</p>
<p>你也可以在一个属性中设置边框。</p>
<p>
你可以在"border"属性中设置：</p>
<ul>
<li>border-width</li>
<li>border-style (required)</li>
<li>border-color</li>
</ul>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">border</span><span class="hl-code">:5</span><span class="hl-identifier">px</span><span class="hl-code"> </span><span class="hl-identifier">solid</span><span class="hl-code"> </span><span class="hl-identifier">red</span><span class="hl-code">;</span></div></div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  rel="noopener" target="_blank">所有边框属性在一个声明之中</a><br/>
本例演示用简写属性来将所有四个边框属性设置于同一声明中。</p>
<p><a  rel="noopener" target="_blank">设置下边框的样式</a><br/>
本例演示如何设置下边框的样式。</p>
<p><a  rel="noopener" target="_blank">设置左边框的宽度</a><br/>
本例演示如何设置左边框的宽度。</p>
<p><a  rel="noopener" target="_blank">设置四个边框的颜色</a><br/>
本例演示如何设置四个边框的颜色。可以设置一到四个颜色。</p>
<p><a  rel="noopener" target="_blank">设置右边框的颜色</a><br/>
本例演示如何设置右边框的颜色。</p>
<hr/>
<h2>CSS 边框属性</h2>
<table class="reference">
<tbody><tr>
<th>属性</th>
<th>描述</th>
</tr>
<tr>
<td><a  title="CSS border 属性">border</a></td>
<td>简写属性，用于把针对四个边的属性设置在一个声明。</td>
</tr>
<tr>
<td><a  title="CSS border-style 属性">border-style</a></td>
<td>用于设置元素所有边框的样式，或者单独地为各边设置边框样式。</td>
</tr>
<tr>
<td><a  title="CSS border-width 属性">border-width</a></td>
<td>简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。</td>
</tr>
<tr>
<td><a  title="CSS border-color 属性">border-color</a></td>
<td>简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。</td>
</tr>
<tr>
<td><a  title="CSS border-bottom 属性">border-bottom</a></td>
<td>简写属性，用于把下边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td><a  title="CSS border-bottom-color 属性">border-bottom-color</a></td>
<td>设置元素的下边框的颜色。</td>
</tr>
<tr>
<td><a  title="CSS border-bottom-style 属性">border-bottom-style</a></td>
<td>设置元素的下边框的样式。</td>
</tr>
<tr>
<td><a  title="CSS border-bottom-width 属性">border-bottom-width</a></td>
<td>设置元素的下边框的宽度。</td>
</tr>
<tr>
<td><a  title="CSS border-left 属性">border-left</a></td>
<td>简写属性，用于把左边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td><a  title="CSS border-left-color 属性">border-left-color</a></td>
<td>设置元素的左边框的颜色。</td>
</tr>
<tr>
<td><a  title="CSS border-left-style 属性">border-left-style</a></td>
<td>设置元素的左边框的样式。</td>
</tr>
<tr>
<td><a  title="CSS border-left-width 属性">border-left-width</a></td>
<td>设置元素的左边框的宽度。</td>
</tr>
<tr>
<td><a  title="CSS border-right 属性">border-right</a></td>
<td>简写属性，用于把右边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td><a  title="CSS border-right-color 属性">border-right-color</a></td>
<td>设置元素的右边框的颜色。</td>
</tr>
<tr>
<td><a  title="CSS border-right-style 属性">border-right-style</a></td>
<td>设置元素的右边框的样式。</td>
</tr>
<tr>
<td><a  title="CSS border-right-width 属性">border-right-width</a></td>
<td>设置元素的右边框的宽度。</td>
</tr>
<tr>
<td><a  title="CSS border-top 属性">border-top</a></td>
<td>简写属性，用于把上边框的所有属性设置到一个声明中。</td>
</tr>
<tr>
<td><a  title="CSS border-top-color 属性">border-top-color</a></td>
<td>设置元素的上边框的颜色。</td>
</tr>
<tr>
<td><a  title="CSS border-top-style 属性">border-top-style</a></td>
<td>设置元素的上边框的样式。</td>
</tr>
<tr>
<td><a  title="CSS border-top-width 属性">border-top-width</a></td>
<td>设置元素的上边框的宽度。</td>
</tr>
<tr>
<td><a  title="CSS border-radius 属性">border-radius</a></td>
<td>设置圆角的边框。</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    